<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/search.css">
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax_fn.js"></script>
</head>

<body>
    <div class="tips">
        <a href="./register.html">注册</a>
        <a href="./login.html">登录</a>
    </div>
    <div class="wrapAll w">
        <form class="search_bar" onsubmit="return false">
            <div class="searchBox">
                <input type="text" class="searchCon">
                <button class="searchBtn">搜索</button>
            </div>
            <div class="orderBox">
                <!-- 排序的列(column)名 (id,chinese,math,english,total) -->
                <div class="orderColBox">
                    <label>
                        学号
                        <input type="radio" checked name="orderCol" class="orderCol" value="id">
                    </label>
                    <label>
                        语文
                        <input type="radio" name="orderCol" class="orderCol" value="chinese">
                    </label>
                    <label>
                        数学
                        <input type="radio" name="orderCol" class="orderCol" value="math">
                    </label>
                    <label>
                        英语
                        <input type="radio" name="orderCol" class="orderCol" value="english">
                    </label>
                    <label>
                        总分
                        <input type="radio" name="orderCol" class="orderCol" value="total">
                    </label>
                </div>

                <!-- 排序的类型  升序 / 降序 -->
                <div class="orderTypeBox">
                    <label>
                        升序
                        <input type="radio" checked name="orderType" class="orderType" value="asc">
                    </label>
                    <label>
                        降序
                        <input type="radio" name="orderType" class="orderType" value="desc">
                    </label>
                </div>

                <div class="showNumBox">
                    <select class="select">
                        <option value="5" selected>每页显示05条</option>
                        <option value="10">每页显示10条</option>
                        <option value="15">每页显示15条</option>
                        <option value="20">每页显示20条</option>
                    </select>
                </div>
                <input type="reset" class="resetBtn" value="重置">
            </div>
        </form>
        <div class="wrapTable">
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>班级</th>
                        <th>语文</th>
                        <th>数学</th>
                        <th>英语</th>
                        <th>总分</th>
                        <th>编辑</th>
                        <th>删除</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr>
                        <td>01</td>
                        <td>02</td>
                        <td>03</td>
                        <td>04</td>
                        <td>05</td>
                        <td>06</td>
                        <td>07</td>
                        <td>08</td>
                        <td>09</td>
                    </tr>
                    <tr>
                        <td>01</td>
                        <td>02</td>
                        <td>03</td>
                        <td>04</td>
                        <td>05</td>
                        <td>06</td>
                        <td>07</td>
                        <td>08</td>
                        <td>09</td>
                    </tr>
                    <tr>
                        <td>01</td>
                        <td>02</td>
                        <td>03</td>
                        <td>04</td>
                        <td>05</td>
                        <td>06</td>
                        <td>07</td>
                        <td>08</td>
                        <td>09</td>
                    </tr>
                    <tr>
                        <td>01</td>
                        <td>02</td>
                        <td>03</td>
                        <td>04</td>
                        <td>05</td>
                        <td>06</td>
                        <td>07</td>
                        <td>08</td>
                        <td>09</td>
                    </tr>
                    <tr>
                        <td>01</td>
                        <td>02</td>
                        <td>03</td>
                        <td>04</td>
                        <td>05</td>
                        <td>06</td>
                        <td>07</td>
                        <td>08</td>
                        <td>09</td>
                    </tr> -->
                </tbody>
            </table>
        </div>
        <div class="pageBox"> 
            <button class="prev">上一页</button>
            <span class="pageTips">1/10</span>
            <button class="next">下一页</button>
        </div>
    </div>

    <div class="shadow">
        <form class="detail" action="" autocomplete="off" onsubmit="return false">
            <p><label>编号:<input type="text" name="id" disabled></label></p>
            <p><label>姓名:<input type="text" name="name" disabled></label></p>
            <p><label>班级:<input type="text" name="class" disabled></label></p>
            <p><label>语文:<input type="text" name="chinese" ></label></p>
            <p><label>数学:<input type="text" name="math"></label></p>
            <p><label>英语:<input type="text" name="english"></label></p>
            <p><button class="subBtn">确定</button><button class="canBtn">取消</button></p>
        </form>
    </div>

</body>
<script>

    var tips = document.getElementsByClassName("tips")[0];
    var tbody = document.querySelector(".wrapTable tbody");
    var editList = document.getElementsByClassName("edit");
    var shadow = document.getElementsByClassName("shadow")[0];
    var detailForm = document.getElementsByClassName("detail")[0];
    var subBtn = document.getElementsByClassName("subBtn")[0];
    var canBtn = document.getElementsByClassName("canBtn")[0];
    var select = document.getElementsByClassName("select")[0];
    var orderTypeList = document.getElementsByClassName("orderType");
    var orderColList = document.getElementsByClassName("orderCol");

    var searchCon = document.getElementsByClassName("searchCon")[0];
    var searchBtn = document.getElementsByClassName("searchBtn")[0];
    var resetBtn = document.getElementsByClassName("resetBtn")[0];

    var pageTips = document.getElementsByClassName("pageTips")[0];
    var prev = document.getElementsByClassName("prev")[0];
    var next = document.getElementsByClassName("next")[0]; 
    console.log(orderColList);

    var key  = "";          // 设置 默认 搜索关键词""  =>  查询所有数据
    var orderCol = "id";    // 设置 默认 排序列名   => 按 id 排序
    var orderType = "asc";  // 设置 默认 排序方式   => 降序 排序
    var showNum = 5;            // 设置 默认 显示函数   => 显示5行
    var pageIndex = 1;      // 设置 默认 显示第一页

// 后端分页  =>  借助sql语法    limit m,n  跳过m，条显示n条
        // 第1页 ： limit 0,5
        // 第2页 ： limit 5,5
        // ...
        // pageIndex =>  limit (pageIndex - 1)*showNum



// 如果有lgc => 就显示欢迎,xxx 
    var cookie = document.cookie;
    if (cookie) {
        var lgc = getCookie("lgc");
        if (lgc) {
            tips.innerHTML = `欢迎,${lgc} <button onclick = "exit();">退出</button>`;
        }
    }
    setData();

// 点击重置按钮时
    resetBtn.onclick = function() {
        key  = ""; 
        orderCol = "id";
        orderType = "asc";
        showNum = 5;
        pageIndex = 1;  
        setData();
    }
// 排序列名选择
    for(let i = 0; i< orderColList.length; i++) {
        let orderOne = orderColList[i];
        orderOne.onclick = function () {
            orderCol = orderOne.value;
            setData();
        }
    }

// 关键词搜索
    searchBtn.onclick = function() {
        key = searchCon.value.trim();
        if(key) {
            setData();
        } else {
            tbody.innerHTML = `<tr> <td colspan = "9">暂无数据</td></tr>`
        }
    }
// 升序、降序选择
    for(let i = 0; i< orderTypeList.length; i++) {
        let orderOne = orderTypeList[i];
        orderOne.onclick = function () {
            orderType = orderOne.value;
            setData();
        }
    }

// 显示行数
    select.onchange = function () {
        showNum = this.value;
        setData();
    }

    // 点击 编辑或删除时
        tbody.onclick = function(e) {
            var e = e || window.event;
            var target = e.target || window.srcElement;

            if(target.className == "edit") {
                shadow.style.display = "block";

            // 编辑数据
                var tr = target.parentElement.parentElement;    
                var id = tr.getAttribute("data-id");        // 查找需要编辑的id
                $.ajax({
                    type:"get",
                    url:"../php/searchGradeById.php",
                    data: {id},
                    dataType:"json",
                    success(result){
                        var {status, msg,data:{id,name,class:_class,chinese,math,english}} = result;
                        if(status) {
                            console.log(id,name,_class,chinese,math,english);
                        // 将数据渲染到页面
                            detailForm.id.value = id;
                            detailForm.name.value = name;
                            detailForm.class.value = _class;
                            detailForm.chinese.value = chinese;
                            detailForm.math.value = math;
                            detailForm.english.value = english;
                        } else {
                            alert(msg);
                        }                        
                    }
                })
            } else if (target.className == "del") {    

            // 删除数据 
                if(confirm("确认删除该条数据吗？")){
                    var tr = target.parentElement.parentElement;    
                    var id = tr.getAttribute("data-id");        // 查找需要删除的id
                // 请求数据并删除   
                    $.ajax({
                        type:"get",
                        url:"../php/deleteGradeById.php",
                        data: {ids:id},
                        dataType:"json",
                        success(result){
                            var {status, msg} = result;
                            if(status) {
                                tr.remove();
                                setData();
                            } else {
                                alert(msg);
                            }
                        }
                    })
                } 
            }
        }

    // 编辑  确定时
        subBtn.onclick = function() {

        // 获取更改后的数据
            var id = detailForm.id.value;
            var chinese = detailForm.chinese.value;
            var math = detailForm.math.value;
            var english = detailForm.english.value;

            if(id && chinese && math && english) {
                $.ajax({
                    type:"post",
                    url:"../php/updateGradeById.php",
                    data:{
                        id,
                        chinese,
                        math,
                        english,
                    },
                    dataType:"json",
                    success(data) {
                        var {status,msg} = data;
                        if(status) {
                            shadow.style.display = "none";
                            setData();
                        } else {
                            alert(msg);
                        }

                    }
                });
            } else {
                alert("请输入完整数据")
            }
            
            
        } 
    // 编辑  取消时
        canBtn.onclick = function() {
            shadow.style.display = "none";
        }

    // 判断 Chinese 输入数据
        detailForm.chinese.onblur = function() {
            var chinese = detailForm.chinese.value;
            if(chinese > 100 || chinese < 0) {
                detailForm.chinese.value = "";
            }
        }
    // 判断 math 输入数据
        detailForm.math.onblur = function() {    
            var math = detailForm.math.value;
            if(math > 100 || math < 0) {
                detailForm.math.value = "";
            }
        }
    // 判断 english 输入数据
        detailForm.english.onblur = function() {   
        var english = detailForm.english.value;
        if(english > 100 || english < 0) {
            detailForm.english.value = "";
        }
    }  





function setData() {
    $.ajax({
        type:"get",
        url:"../php/searchAllGradeLimit.php",
        data:{
            key,
            showNum,
            pageIndex,
            orderCol,
            orderType,
        },
        dataType:"json",
        success(data){
            var {list,count,maxPage} = data;
            var html = "";
            pageIndex = pageIndex > maxPage ? maxPage : pageIndex;    // 设置页码变化 
            pageTips.textContent = `${pageIndex}/${maxPage}`;        // 显示页码
            list.forEach(({id,name,class:_class,chinese,math,english,total}) => {  
                html += `<tr data-id = "${id}">
                            <td>${id}</td>
                            <td>${name}</td>
                            <td>${_class}</td>
                            <td>${chinese}</td>
                            <td>${math}</td>
                            <td>${english}</td>
                            <td>${total}</td>
                            <td><a href = "javascript:;" class = "edit">编辑</a></td>
                            <td><a href = "javascript:;" class = "del">删除</a></td>
                        </tr>`  ;
            });
            tbody.innerHTML = html;
            prev.onclick = function(){
                if(pageIndex <= 1) {
                    return false;
                }
                pageIndex--;  
                setData();
            }
            next.onclick = function(){
                if(pageIndex >= maxPage) {
                    return false;
                }
                pageIndex++;  
                setData();
            }
        }
    });
}

function exit() {
    // setCookie("lgc", "", -1);
    delCookie("lgc");
    location.reload();
}


  
   

</script>

</html>